<!DOCTYPE html>
<html>
	<head>
		<title>CotefeJS Frame</title>
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  		<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
  		<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
  		<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
		<script type="text/javascript" src="../scripts/cotefe.js"></script>
		
		<style>
			div , fieldset {display:block;border:1px solid #ccc;margin:10px;
				-moz-box-shadow: 0 0 6px #A4A4A4;
				-webkit-box-shadow: 0 0 6px #A4A4A4;
			}
			div h3,div h1{display:block;margin:0;padding-left:10px;color:#ffffff;background-color:#2D2D2D;
				-moz-box-shadow: 0 0 6px #A4A4A4;
				-webkit-box-shadow: 0 0 6px #A4A4A4;					
			}	
					
			form input[type="text"]{width:250px;border:1px solid #ccc;height:25px;}
			form fieldset{position:relative;}
			fieldset table input[type="text"]{width:190px;border:1px solid #ccc;height:25px;float:right;}
			textarea{width:100%;height:200px;border:1px solid #ccc;padding:0px;color:#2A120A;}
			input[type="button"]{width:70px;}
			.note{font-size:10px;color:#ff0000;}
		</style>
	</head>
	<body>
	    <div><h1>COTEFE-JS Test</h1></div>
	    <div>
			<h3>URL</h3>
			<form>
				<fieldset>
					
					<label for="token">Current URL:</label>
					<input type="text" name="url" value="" />
				</fieldset>
			</form>
		</div>
		<div>
			<h3>ID</h3>
			<form>
				<fieldset>
					
					<label for="token">Oauth Access Token:</label>
					<input type="text" name="token" value="1908700504b2474e9e9d6cc6225d3ece" />
				</fieldset>
			</form>
		</div>
		
		<div>
		    <h3>User</h3>
		    <form>
		    <div>
		    	<textarea id="userContent"></textarea>		        
		    </div>
		    </form>
		</div>
		<div>
			<h3>Project</h3>
			<form class="project">
				<fieldset>
				    <table width="100%" >
				        <tr>
				            <td width="30%">
				                <input type="button" class="get" name="GET" value="GET"/>
				                <input type="text" name="get_projectid" />
				                <hr>
				                <input type="button" class="post" name="POST" value="POST"/><hr>
				                <input type="button" name="PUT" value="PUT"/>
				                <span class="note">Write correction JSON inc. URI</span>
				                <hr>
				                <input type="button" class="delete" name="DELETE" value="DELETE"/>
				                <input type="text" name="del_projectid" />
				            </td>
				            <td><textarea id="projects"></textarea></td>
				        </tr>
				    </table>				    
				</fieldset>
			</form>
		</div>
		<div>
			<h3>Experiment</h3>
			<form class="experiment" >
				<fieldset>
                    <table width="100%" >
                        <tr>
                            <td width="30%">
                                <input type="button" class="get" name="GET" value="GET"/>
                                <input type="text" name="get_projectid" />
                                <hr>
                                <input type="button" class="post" name="POST" value="POST"/><hr>
                                <input type="button" name="PUT" value="PUT"/>
                                
                                <hr>
                                <input type="button" class="delete" name="DELETE" value="DELETE"/>
                                <input type="text" name="del_projectid" />
                            </td>
                            <td><textarea id="experiments"></textarea></td>
                        </tr>
                    </table>                    
                </fieldset>
			</form>
		</div>
		<div>
			<h3>Jobs</h3>
			<form class="job" >
				<fieldset>
                    <table width="100%" >
                        <tr>
                            <td width="30%">
                                <input type="button" class="get" name="GET" value="GET"/>
                                <input type="text" name="get_jobid" />
                                <hr>
                                <input type="button" class="post" name="POST" value="POST"/><hr>
                                <input type="button" name="PUT" value="PUT"/>
                                
                                <hr>
                                <input type="button" class="delete" name="DELETE" value="DELETE"/>
                                <input type="text" name="del_jobid" />
                            </td>
                            <td><textarea id="jobs"></textarea></td>
                        </tr>
                    </table>                    
                </fieldset>
			</form>
		</div>
		<div>
			<h3>Images</h3>
			<form class="image" >
				<fieldset>
                    <table width="100%" >
                        <tr>
                            <td width="30%">
                                <input type="button" class="get" name="GET" value="GET"/>
                                <input type="text" name="get_projectid" />
                                <hr>
                                <input type="button" class="post" name="POST" value="POST"/><hr>
                                <input type="button" name="PUT" value="PUT"/>
                                
                                <hr>
                                <input type="button" class="delete" name="DELETE" value="DELETE"/>
                                <input type="text" name="del_projectid" />
                            </td>
                            <td><textarea id="images"></textarea></td>
                        </tr>
                    </table>                    
                </fieldset>
			</form>
		</div>
		<div>
			<h3>Static Resources</h3>
			<form>
				<fieldset>
					
					<label for="testbed1">TestBeds:</label>
					<input type="text"  name="testbed1" />
				</fieldset>
			</form>
		</div>
	</body>
</html>